<template>
  <div>
    <textarea :id="id" />
  </div>
</template>

<script>
export default {
  name: 'JspCkeditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ckeditor: null
    }
  },
  watch: {
    // 监听value变化
    value() {
      if (this.value !== this.ckeditor.getData()) {
        this.ckeditor.setData(this.value)
      }
    }
  },
  mounted() {
    // 挂载后：初始化对象、编辑器内容以及监听编辑器内容变化
    this.ckeditor = window.CKEDITOR.replace(this.id)
    this.ckeditor.setData(this.value)
    this.ckeditor.on('change', () =>
      this.$emit('input', this.ckeditor.getData())
    )
  },
  beforeDestroy: function() {
    this.ckeditor.destroy()
  }
}
</script>
